<template>
    <div class="app-container">
        <div class="search-container" ref="searchRef">
            <el-form :model="state" size="default" inline>
                <el-form-item label="商户号">
                    <el-input v-model="state.pagination.number" placeholder="请输入商户名称"></el-input>
                </el-form-item>
                <el-form-item label="施工地址">
                    <el-input v-model="state.pagination.cleaning_site" placeholder="请输入商户名称"></el-input>
                </el-form-item>
                <el-form-item label="清洗范围">
                    <el-input v-model="state.pagination.cleaning_range" placeholder="请输入商户名称"></el-input>
                </el-form-item>
                <el-form-item label="审核状态">
                    <el-select v-model="state.pagination.yd_status" placeholder="请选择" clearable>
                        <el-option label="待审核" :value="100"></el-option>
                        <el-option label="已通过" :value="200"></el-option>
                        <el-option label="未通过" :value="300"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getDataList()">搜索</el-button>
                    <el-button size="default" type="warning" @click="refreshBtn">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-card shadow="never">
            <template #header>
                <el-button type="success" size="mini" @click="onDownExcel">导出</el-button>
            </template>
            <el-table :height="pageHeight + 'px'" :data="state.list" v-loading="state.loading">
                <el-table-column label="序号" type="index" min-width="80"></el-table-column>
                <el-table-column label="商户号" prop="number" min-width="80"></el-table-column>
                <el-table-column label="施工地址" prop="cleaning_site" min-width="120"></el-table-column>
                <el-table-column label="清洗范围" min-width="120" prop="cleaning_range"></el-table-column>
                <el-table-column label="施工单位" min-width="120" prop="cleaning_unit"></el-table-column>
                <el-table-column label="乙方清洗人员" min-width="120" prop="service_staff"></el-table-column>
                <el-table-column label="清洗人员电话" min-width="120" prop="service_phone"></el-table-column>
                <el-table-column label="审核状态">
                    <template #default="scope">
                        <el-tag v-if="scope.row.yd_status === 100">待审核</el-tag>
                        <el-tag v-else-if="scope.row.yd_status === 200" type="success">已通过</el-tag>
                        <el-tag v-else-if="scope.row.yd_status === 300">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="图片" prop="is_water">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px"
                            :src="`http://api.huojisuan.com${scope.row.check_images[0]}`"></el-image>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="类型" min-width="120">
        <template #default="{ row }">
          <el-tag :type="row.type === 1 ? '' : 'success'">{{ row.type === 1 ? '三关一闭' : '油烟清洗' }}</el-tag>
        </template>
      </el-table-column> -->
                <el-table-column label="清洗时间" prop="cleaning_time" min-width="120"></el-table-column>
                <el-table-column width="100">
                    <template #default="scope">
                        <div v-if="scope.row.yd_status === 100">
                            <el-button @click="hanldeAuditing(scope.row.id)" size="default"
                                type="success">审核</el-button>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="驳回原因" prop="reasons"> </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 10px" background v-model:current-page="state.pagination.page"
                v-model:page-size="state.pagination.rows" layout="->,total, sizes, prev, pager, next, jumper"
                :total="state.total" @current-change="getList" @size-change="getList" />
        </el-card>

        <el-dialog title="审核" v-model="dialogVisible" width="600px">
            <el-radio-group v-model="dialogRadio">
                <el-radio :label="100">待审核</el-radio>
                <el-radio :label="200">已通过</el-radio>
                <el-radio :label="300">未通过</el-radio>
            </el-radio-group>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="hanldeConfirmAuditing">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { dataList, listsExclV2, myXfExamine } from '@/api/flueClean'
import { ElMessage, ElMessageBox } from 'element-plus'
const state = reactive({
    loading: false,
    pagination: {
        rows: 20,
        page: 1,
        number: '',
        cleaning_site: '',
        cleaning_range: '',
        yd_status: '',
    },
    total: 0,
    list: []
})

const pageHeight = ref(0)
const searchRef = ref(null)

onMounted(() => {
    pageHeight.value = window.innerHeight - searchRef.value.clientHeight - 265
})

const refreshBtn = () => {
    state.pagination.number = '';
    state.pagination.cleaning_site = '';
    state.pagination.cleaning_range = '';
    state.pagination.yd_status = ''
    getList(1);
}



const getDataList = () => {
    getList(1);
}

const getList = async (page = 1) => {
    state.loading = true
    if (page === 1) state.pagination.page = 1
    const { data } = await dataList(state.pagination).finally(() => (state.loading = false))
    state.list = data.list
    state.total = data.total
}

const dialogVisible = ref(false);
const dialogRadio = ref(100);
const shopId = ref(0);

// 审核
const hanldeAuditing = (id: number) => {
    shopId.value = id;
    dialogVisible.value = true;
}

// 提交审核
const hanldeConfirmAuditing = () => {

    if (dialogRadio.value == 300) {

        ElMessageBox.prompt('填写拒绝原因', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^.+$/,
            inputErrorMessage: '不能为空'
        }).then(({ value }) => {
            myXfExamine({
            id: shopId.value,
            yd_status: dialogRadio.value,
            reasons: value
        }).then((res: any) => {
            ElMessage.success(res.msg)
            getList(1)
            dialogVisible.value = false;
        })
        }).catch(() => { })

    } else {
        myXfExamine({
            id: shopId.value,
            yd_status: dialogRadio.value,
        }).then((res: any) => {
            ElMessage.success(res.msg)
            getList(1)
            dialogVisible.value = false;
        })
    }

}

getList()
const onDownExcel = () => {
    listsExclV2({}).then((res) => {
        const blob = new Blob([res], {
            type: 'application/vnd.ms-excel'
        })

        if (window.navigator.msSaveOrOpenBlob) {
            //兼容IE10
            navigator.msSaveBlob(blob, '导出文件.xlsx')
        } else {
            const href = URL.createObjectURL(blob) //创建新的URL表示指定的blob对象
            const a = document.createElement('a') //创建a标签
            a.style.display = 'none'
            a.href = href // 指定下载链接
            a.download = '导出文件.xlsx' //指定下载文件名
            a.click() //触发下载
            URL.revokeObjectURL(a.href) //释放URL对象
        }
    })
}
</script>

<style lang="scss" scoped></style>
